<template>
	<view>
		<view class="wanl-product">
			<view class="product_warter" :class="dataStyle"
				v-if="dataStyle == 'col-2-10' || dataStyle == 'col-2-15' || dataStyle == 'col-2-20' || dataStyle == 'col-2-25' || dataStyle == 'col-2-30'">
				<view class="wanl-waterfall">
					<view id="wanl-left-cloumn" class="wanl-cloumn">
						<view class="warter left" v-for="(item, index) in leftList" :key="index"
							@tap="handleGoods(item.id)">
							<view class="img-wrap">
								<image class="image" :src="$wanlshop.oss(item.image, 125, 125)" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<block v-if="item.shop.isself == 1">
										<view class="cu-tag radius sm bg-red">自营</view>
									</block>
									<block v-else>
										<view class="cu-tag radius sm bg-gray" v-if="item.shop.state == 0">个人</view>
										<view class="cu-tag radius sm wanl-bg-blue" v-else-if="item.shop.state == 1">企业
										</view>
										<view class="cu-tag radius sm wanl-bg-orange" v-else-if="item.shop.state == 2">
											旗舰</view>
									</block>
									<block v-if="dataType === 'groups'">
										<view class="cu-tag radius sm bg-red">
											{{item.is_ladder === 1 ? '阶梯' : item.people_num+'人'}}拼团
										</view>
									</block>
									<text class="margin-left-xs">{{ item.title }}</text>
								</view>
								<view class="description">{{ item.description }}</view>
								<view class="goods-tag">
									<view class="cu-tag radius sm line-red" v-if="item.shop.isself == 1">官方放心购</view>
									<view class="cu-tag radius sm line-gray" v-if="item.isLive"
										@tap="onLive(item.isLive)">LIVE</view>
								</view>
								
								<!-- 不展示优惠价 -->
								<block v-if="!item.is_yhprice">
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="text-price">{{ item.price }}</text>
										</view>
										<view class="text-sm wanl-gray" v-if="dataType === 'groups'">
											<text>已拼团 {{$wanlshop.toFormat(item.groups_num, 'hundred')}} 件</text>
										</view>
										<view class="text-sm wanl-gray" v-else>
											
											<view class="wanl-numberBox solid" 
											v-if="cart.list.length > 0 && cartGoodIDs.includes(item.id)">
												<block v-for="(cartitem, cartindex) in cart.list" :key="cartindex">
													<block v-for="(goods, keys) in cartitem.products" :key="keys"
													v-if="item.id == goods.goods_id">
														<view @tap.stop="bcsub(goods)">
															<text class="wlIcon-jian round text-gray"></text>
														</view>
														<view>{{goods.number}}</view>
														<view @tap.stop="bcadd(goods)">
															<text class="wlIcon-tianjia round"></text>
														</view>
													</block>
												</block>
											</view>
											
											<view class="wlIcon-gouwuche cartIcon" 
											v-if="!cartGoodIDs.includes(item.id)"
											 @click.stop="addToCart(item.id)"></view>
											
											<!-- <text>{{$wanlshop.toFormat(item.comment, 'hundred')}} 评价</text> -->
										</view>
									</view>
								</block>
								
								<!-- 展示优惠价 -->
								<block v-if="item.is_yhprice">
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="text-price">{{ item.market_price }}</text>
										</view>
										<view class="text-sm wanl-gray" v-if="dataType === 'groups'">
											<text>已拼团 {{$wanlshop.toFormat(item.groups_num, 'hundred')}} 件</text>
										</view>
										<view class="text-sm wanl-gray" v-else>
											
											<view class="wanl-numberBox solid"
											v-if="cart.list.length > 0 && cartGoodIDs.includes(item.id)">
												<block v-for="(cartitem, cartindex) in cart.list" :key="cartindex">
													<block v-for="(goods, keys) in cartitem.products" :key="keys"
													v-if="item.id == goods.goods_id">
														<view @tap.stop="bcsub(goods)">
															<text class="wlIcon-jian round text-gray"></text>
														</view>
														<view>{{goods.number}}</view>
														<view @tap.stop="bcadd(goods)">
															<text class="wlIcon-tianjia round"></text>
														</view>
													</block>
												</block>
											</view>
											
											<view class="wlIcon-gouwuche cartIcon" 
											v-if="!cartGoodIDs.includes(item.id)"
											 @click.stop="addToCart(item.id)"></view>
											 
											<!-- <text>{{$wanlshop.toFormat(item.comment, 'hundred')}} 评价</text> -->
										</view>
									</view>
									
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="youhuijia">优惠价</text>
											<text class="text-price">{{ item.price }}</text>
										</view>
									</view>
								</block>
								
								
							</view>
						</view>
					</view>
					<view id="wanl-right-cloumn" class="wanl-cloumn">
						<view class="warter right" v-for="(item, index) in rightList" :key="index"
							@tap="handleGoods(item.id)">
							<view class="img-wrap">
								<image class="image" :src="$wanlshop.oss(item.image, 125, 125)" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<block v-if="item.shop.isself == 1">
										<view class="cu-tag radius margin-right-xs sm bg-red">自营</view>
									</block>
									<block v-else>
										<view class="cu-tag radius sm margin-right-xs bg-gray"
											v-if="item.shop.state == 0">个人</view>
										<view class="cu-tag radius sm margin-right-xs wanl-bg-blue"
											v-else-if="item.shop.state == 1">企业</view>
										<view class="cu-tag radius sm margin-right-xs wanl-bg-orange"
											v-else-if="item.shop.state == 2">旗舰</view>
									</block>
									<text>{{ item.title }}</text>
								</view>
								<view class="description">{{ item.description }}</view>
								<view class="goods-tag">
									<view class="cu-tag radius sm line-red" v-if="item.shop.isself == 1">官方放心购</view>
									<view class="cu-tag radius sm line-gray" v-if="item.isLive"
										@tap="onLive(item.isLive)">LIVE</view>
								</view>
								
								<!-- 不展示优惠价 -->
								<block v-if="!item.is_yhprice">
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="text-price">{{ item.price }}</text>
										</view>
										<view class="text-sm wanl-gray" v-if="dataType === 'groups'">
											<text>已拼团 {{$wanlshop.toFormat(item.groups_num, 'hundred')}} 件</text>
										</view>
										<view class="text-sm wanl-gray" v-else>
											<view class="wanl-numberBox solid"
											v-if="cart.list.length > 0 && cartGoodIDs.includes(item.id)">
												<block v-for="(cartitem, cartindex) in cart.list" :key="cartindex">
													<block v-for="(goods, keys) in cartitem.products" :key="keys"
													v-if="item.id == goods.goods_id">
														<view @tap.stop="bcsub(goods)">
															<text class="wlIcon-jian round text-gray"></text>
														</view>
														<view>{{goods.number}}</view>
														<view @tap.stop="bcadd(goods)">
															<text class="wlIcon-tianjia round"></text>
														</view>
													</block>
												</block>
											</view>
											
											<view class="wlIcon-gouwuche cartIcon" 
											v-if="!cartGoodIDs.includes(item.id)"
											 @click.stop="addToCart(item.id)"></view>
										</view>
									</view>
								</block>
								
								<!-- 展示优惠价 -->
								<block v-if="item.is_yhprice">
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="text-price">{{ item.market_price }}</text>
										</view>
										<view class="text-sm wanl-gray" v-if="dataType === 'groups'">
											<text>已拼团 {{$wanlshop.toFormat(item.groups_num, 'hundred')}} 件</text>
										</view>
										<view class="text-sm wanl-gray" v-else>
											<view class="wanl-numberBox solid"
											v-if="cart.list.length > 0 && cartGoodIDs.includes(item.id)">
												<block v-for="(cartitem, cartindex) in cart.list" :key="cartindex">
													<block v-for="(goods, keys) in cartitem.products" :key="keys"
													v-if="item.id == goods.goods_id">
														<view @tap.stop="bcsub(goods)">
															<text class="wlIcon-jian round text-gray"></text>
														</view>
														<view>{{goods.number}}</view>
														<view @tap.stop="bcadd(goods)">
															<text class="wlIcon-tianjia round"></text>
														</view>
													</block>
												</block>
											</view>
											
											<view class="wlIcon-gouwuche cartIcon" 
											v-if="!cartGoodIDs.includes(item.id)"
											 @click.stop="addToCart(item.id)"></view>
										</view>
									</view>
									
									<view class="flex align-center justify-between">
										<view class="text-red text-bold text-lg">
											<text class="youhuijia">优惠价</text>
											<text class="text-price">{{ item.price }}</text>
										</view>
									</view>
								</block>
								
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 普通布局 -->
			<view class="product_list" :class="dataStyle" v-else>
				<view class="item" v-for="(item, index) in dataList" :key="index" @tap="handleGoods(item.id)">
					<view class="img-wrap">
						<image :src="$wanlshop.oss(item.image, 125, 125)" mode="aspectFill"></image>
					</view>
					<view class="content padding-sm">
						<view class="">
							<view class="text-cut-2">
								<block v-if="item.shop.isself == 1">
									<view class="cu-tag radius margin-right-xs sm bg-red">自营</view>
								</block>
								<block v-else>
									<view class="cu-tag radius sm margin-right-xs bg-gray" v-if="item.shop.state == 0">
										个人</view>
									<view class="cu-tag radius sm margin-right-xs wanl-bg-blue"
										v-else-if="item.shop.state == 1">企业</view>
									<view class="cu-tag radius sm margin-right-xs wanl-bg-orange"
										v-else-if="item.shop.state == 2">旗舰</view>
								</block>
								<text>{{ item.title }}</text>
							</view>
							<view class="goods-tag">
								<view class="cu-tag radius sm line-red" v-if="item.shop.isself == 1">官方放心购</view>
								<view class="cu-tag radius sm line-gray" v-if="item.isLive" @tap="onLive(item.isLive)">
									LIVE</view>
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="text-red text-bold text-lg">
								<text class="text-price">{{ item.price }}</text>
							</view>
							<view class="text-sm wanl-gray">
								<text class="margin-right">{{$wanlshop.toFormat(item.comment, 'hundred')}} 评价</text>
								<text>{{ item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0 }}%
									好评</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加入购物车  规格 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="option wanl-modal">
						<view class="head text-left padding-bj solid-bottom">
							<view
								class="cu-avatar radius-bock margin-right"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }"
							></view>
							
							<view>
								<view class="text-price wanl-orange text-xl margin-bottom-xs">{{ selectshop.price || goodsData.interval_price }}</view>
								<view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
									库存 <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text> 件
								</view>
								<view class="text-sm">
									<view v-if="selectArr.join('')">
										<text class="margin-right-bj">已选择</text>
										<text class="margin-right-xs" v-for="(name, key) in selectArr">{{ $base64.decode(name) }}</text>
									</view>
									<view v-else>
										请选择：
										<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
											<block v-if="index != 0">-</block>
											{{ $base64.decode(item.name) }}
										</text>
									</view>
								</view>
							</view>
							
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						
						<!-- 1.0.8升级 -->
						<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
							<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu" :key="value.id">
								<view class="text-df">{{ value.name }}</view>
								<view class="tag">
									<view
										class="cu-tag text-sm"
										v-for="(item, index) in value.item"
										:key="index"
										:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
										@tap="skuClick(item, spukey, $event, index)"
									>
										{{ $base64.decode(item.name) }}
									</view>
								</view>
							</view>
							<view class="number padding-bj">
								<view class="text-df">购买数量</view>
								<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount" @change="changeNum"></uni-number-box>
							</view>
						</scroll-view>

						<view class="foot padding-lr-bj">
							<button class="cu-btn bg-gradual-orange round text-bold complete" @tap="completeSelection">完成</button>
						</view>
					</view>
					
				</view>
			</view>
								
								
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	
	/**
	 * wanlProduct 商品
	 * @description 商品组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
	 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
	 * @property {Array} dataList 列表数据
	 * @property {String} dataStyle 列表样式
	 * @example <wanl-product />
	 */
	export default {
		name: 'wanlProduct',
		props: {
			dataList: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			dataStyle: {
				type: String,
				default: 'col-2-20'
			},
			dataType: {
				type: String,
				default: 'goods'
			},
			cartGoodIDs: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				addTime: 180,
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				
				wanlsys: {},
				modalName: null, // 弹出层
				isChoice: '', // 是否从选择进入
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				
				
				//产品数据
				goodsData: {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {}
				},
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				// 取差值，即这一次数组变化新增的部分
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.slice(startIndex).length == 0) {
					this.leftList = [];
					this.rightList = [];
					this.tempList = this.cloneData(this.copyFlowList);
				}else{
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			},
		},
		mounted() {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			// 破坏flowList变量的引用，否则watch的结果新旧值是一样的
			copyFlowList() {
				return this.cloneData(this.dataList);
			},
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common'])
		},
		methods: {
			...mapActions({
				operate: 'cart/operate', // 管理购物车
				choose: 'cart/choose', // 选择商品
				shopchoose: 'cart/shopchoose', // 选择店铺
				bcadd: 'cart/bcadd', // 添加数量
				bcsub: 'cart/bcsub', // 减少数量
				move: 'cart/move', // 移动购物车
				settlement: 'cart/settlement', // 结算购物车
				del: 'cart/del' // 删除选中购物车
			}),
			async splitData() {
				if (!this.tempList.length) return;
				let rightRect = await this.getRect('#wanl-right-cloumn');
				let leftRect = await this.getRect('#wanl-left-cloumn');
				// 如果左边小于或等于右边，就添加到左边，否则添加到右边
				let item = this.tempList[0];
				if(!item) return ;
				item.image = this.$wanlshop.oss(item.image, 172, 0, 1);
				item.comment = this.$wanlshop.toFormat(item.comment, 'hundred');
				item.praise = item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					// 这里是为了保证第一和第二张添加时，左右都能有内容
					// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				// 移除临时列表的第一项
				this.tempList.splice(0, 1);
				// 如果临时数组还有数据，继续循环
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime)
				}
			},
			// 复制而不是引用对象和数组
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			getRect(selector, all) {
				return new Promise(resolve => {
					let query = null;
					// 支付宝小程序不能加后面的.in(this)，是它自身的限制
					// #ifndef MP-ALIPAY
					query = uni.createSelectorQuery().in(this)
					// #endif
					// #ifdef MP-ALIPAY
					query = uni.createSelectorQuery()
					// #endif
					query[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect(rect => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
			handleGoods(id) {
				if (this.dataType === 'goods') {
					this.onGoods(id);
				} else if (this.dataType === 'groups') {
					this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
				}
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				this.modalName = name;
			},
			//加入购物车
			async addToCart(id) {
				this.initCart();
				this.loadData(id);
				this.modalName = 'option';
				this.isChoice = 'addToCart';
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			initCart(){
				this.modalName = null; // 弹出层
				this.isChoice = ''; // 是否从选择进入
				this.shopItemInfo = {}; //存放要和选中的值进行匹配的数据
				this.selectArr =  []; //存放被选中的值
				this.subIndex =  []; //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				this.selectshop =  {}; //存放最后选中的商品
				this.selectNum =  1; //选中数量
				
				
				//产品数据
				this.goodsData = {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {}
				};
			},
			async loadData(id) {
				//加载商品
				await uni.request({
					url: '/wanlshop/product/goods',
					data: {
						id:id
					},
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
							var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						
						// 价格区间
						if (res.data.sku.length == 0) {
							res.data.interval_price = res.data.price;
							res.data.market_price = res.data.price;
						}else{
							let price = [],
								market_price = [];
							for (let value of res.data.sku) {
								price.push(value.price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.data.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) : ( minPrice + '-' + Number(maxPrice).toFixed(2) ); //区间价格
							res.data.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						}
						
						this.goodsData = res.data;
						
						// 商品规格组合
						this.goodsData.spu.map(item => {
							// 1.1.3升级
							item.item.map((name, key, arr) =>{
								arr[key].name = this.$base64.encode(arr[key].name)
							});
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						
						// 1.1.3升级
						this.goodsData.sku.map(item => {
							item.difference.map((name, index, arr) =>{
								arr[index] = this.$base64.encode(name)
							});
						});
						
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
					}
				});
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {
				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[[]]
							)
						);
					},
					[[]]
				);
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						// 1.1.3升级
						this.selectshop.difference.map((name, index, arr)=> {
							arr[index] = this.$base64.decode(name)
						})
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},
			async loadStock(sku_id){
				await uni.request({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res.data;
					}
				});
			},
			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
					this.$emit('updateCart');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [
						{
							goods_id: this.goodsData.id,
							number: this.selectNum,
							sku_id: this.selectshop.id
						}
					];
					// 提交订单
					if (this.$store.state.user.isLogin) {
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}`
						});
					}else{
						this.$wanlshop.to('/pages/user/auth/auth');
					}
					
				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			//商品规格修改数量
			changeNum(val) {
				if(this.selectshop.stock){
					let num = parseInt(val);
					if(num > this.selectshop.stock){
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					}else{
						this.selectNum = parseInt(val);
					}
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.wanl-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		.wanl-cloumn {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: auto;
			width: 50%;
			.wanl-image {
				width: 100%;
			}
		}
	}
	
	.description{
		font-size: 24rpx;
		padding: 8rpx 0rpx;
	}
	
	.youhuijia{
		font-size: 20rpx;
		margin-right: 10rpx;
	}
	
	.cartIcon{
		font-size: 36rpx;
	}
	.wanl-numberBox{
		width: 160rpx !important;
	}
</style>
